<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--      筛选-->
      <!--      分栏24占满 -->
      <el-col :span="24" :xs="24">
        <el-form v-if="!loading" label-position="top" :rules="rules" :model="problemData" ref="problemForm" size="small"  label-width="100px">
          <el-form-item label="标题" prop="title">
            <el-input
              v-model="problemData.title"
              placeholder="请输入标题"
              clearable
            />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <md-editor ref="descriptionMd" :default-data="problemData.description"/>
          </el-form-item>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="权限" prop="auth">
                <el-select
                  v-model="problemData.auth"
                  placeholder="选择权限"
                >
                  <el-option
                    v-for="dict in authList"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="密码" prop="privatePwd">
                <el-input show-password  v-model="problemData.privatePwd" />
              </el-form-item>
            </el-col >
          </el-row>
          <el-row :gutter="20" :span="24">
            <el-col :span="12">
              <el-form-item label="展示顺序" prop="rank">
                <el-input-number v-model="problemData.rank"  label="展示顺序"></el-input-number>
              </el-form-item>
            </el-col >
            <el-col :span="12">
              <el-form-item style="width: 100%" label="题目列表" prop="problemList">
                <reference :component="() => import('@/views/problem/index')"
                           title="题目参照"
                           :multiple="true"
                           :operation="{value : 'id' , label : 'title'}"
                           v-model="problemData.problemList" />
              </el-form-item>
            </el-col >
          </el-row>
          <el-form-item label="是否启用" prop="codeShare">
            <el-switch
              v-model="problemData.status"
              :active-value="0"
              :inactive-value="1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24">
        <el-button :loading="savaLoading" type="sussess" @click="saveProblemList" style="width: 100%">保存题单</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import MdEditor from '@/components/mdEditor'
import Reference from '@/components/Reference'
import * as problemListApi from "@/api/problemList"
export default {
  name: 'addProblemList',
  components: { Reference, MdEditor },
  data(){
    return{
      loading:false,
      tagLoading:false,
      languagesLoading:false,
      difficultyLoading:false,
      problemTypeLoading:false,
      savaLoading:false,
      problemData : {
        title:undefined,
        description:undefined,
        auth:1,
        rank:1,
        status:0,
        privatePwd:undefined,
        problemList:[],
        problemIds:[]
      },
      exampleList:[

      ],
      authList:[
        {
          label:"公开",
          value:0,
        },
        {
          label:"私有",
          value:1,
        }
      ],
      typeList:[
        {
          label:"ACM",
          value:0,
        },
        {
          label:"OI",
          value:1,
        },
      ],
      tagList:[],
      difficultyList:[],
      languageList:[],
      problemTypeList:[],
      languageIdList:[],
      rules: {
        title: [{ required: true, message: "标题不能不为空", trigger: "blur", },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }],
        description: {
          required: true,
          message: "描述不能为空",
          trigger: "blur",
        },
        rank: {
          required: true,
          message: "展示顺序不能为空",
          trigger: "blur",
        },
      },
    }
  },
  created() {
    const id = this.$route.query.id;
    console.log(id)
    if(id!=undefined && id!=null){
      this.loading = true;
      problemListApi.query(id).then(res => {
        this.problemData = res.data
      }).finally(() => {
        this.loading = false;
      })
    }else{

    }
  },
  methods:{
    saveProblemList(){
      this.problemData.description = this.$refs.descriptionMd.getValue();
      this.$refs["problemForm"].validate(valid => {
        if (valid) {
          let params = this.problemData
          params.problemIds = this.problemData.problemList.map(item => item.id);
          params.problemList = []
          this.savaLoading = true;
          problemListApi.saveOrUpdate(params).then(res => {
            this.$message.success("保存成功！")
          }).catch(err => {

          }).finally(() => {
            this.savaLoading = false;
          })
        }else{
          this.$message.error("校验失败！")
        }
      });
    },

  }
}
</script>

<style scoped>

</style>
